import React, { useEffect, useState, useCallback, useRef, memo, useContext } from 'react'
import { connect } from 'react-redux'
import { getIndexContent } from '@/redux/async'
import TabBar from 'components/TabBar/TabBar'
import './index.scss'
import Header from 'components/Header/Header'
import Drawer from 'components/Drawer/Drawer'
import VideoItem from 'components/VideoItem/VideoItem'

import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import Context from '@/config/context'

function Index(props) {
    const {
        oneLevelPartitions,
        additionalVideos,
        rankingVideos,
        banners,
        dispatch,
        history
    } = props
    useEffect(() => {
        dispatch(getIndexContent())
    }, [])
    const [isdraw, setIsdraw] = useState(false)
    const [tabindex, setTabindex] = useState(0)
    const [videos, setVideos] = useState([])
    const [tabBarData, setTabBarData] = useState([])
    useEffect(() => {
        new Swiper('.swiper-container', {
            loop: true, //循环
            autoplay: {
                //滑动后继续播放（不写官方默认暂停）
                disableOnInteraction: false
            },
            pagination: {
                //分页器
                el: '.swiper-pagination'
            }
        })
    }, [banners])

    useEffect(() => {
        let ids = Array.from(additionalVideos, (x) => {
            return x.aId
        })
        setVideos(() =>
            rankingVideos
                .filter((e) => {
                    return !ids.includes(e.aId)
                })
                .slice(0, 100)
        )
    }, [rankingVideos, additionalVideos])

    useEffect(() => {
        setTabBarData([{ id: 0, name: '首页' }, ...oneLevelPartitions, { id: -1, name: '直播' }])
    }, [oneLevelPartitions])
    const Selecttab = useCallback((tab, index) => {
        setTabindex(index)
        judgeTab(tab.id)
    })
    const judgeTab = useCallback((id) => {
        if (id === -1) {
            history.push('/live')
            return
        }
        if (id === 0) {
            history.push('/index')
        } else {
            history.push(`/channel/${id}`)
        }
    })
    const toggle = useCallback(() => {
        setIsdraw((isdraw) => !isdraw)
    })
    const getPicUrl = useCallback((url, format) => {
        const { picURL } = useContext(Context)
        let suffix = '.jpg'
        // picURL + "?pic=" + url + "@480w_300h.webp"
        return `${picURL}?pic=${url}${format + suffix}`
    })

    return (
        <div className="index">
            {/* 头部 */}
            <div className="top-wrapper">
                <Header />
                <div className="partition flex middle ">
                    <div className="pad-right">
                        <TabBar
                            tabindex={tabindex}
                            data={tabBarData}
                            type="indicate"
                            Selecttab={Selecttab}
                        ></TabBar>
                    </div>
                    <div
                        className="switch"
                        onClick={() => {
                            toggle()
                        }}
                    >
                        <i className="icon-arrow-down" />
                    </div>
                </div>
                <div className="drawerbox">
                    <Drawer
                        tabindex={tabindex}
                        isdraw={isdraw}
                        toggle={toggle}
                        data={tabBarData}
                        Selecttab={Selecttab}
                    />
                </div>
            </div>
            {/* 内容 */}
            <div className="content">
                {banners.length > 0 ? (
                    <div className="banner-slider">
                        <div className="swiper-container">
                            <div className="swiper-wrapper">
                                {banners.map((item) => (
                                    <BannerItem getPicUrl={getPicUrl} {...item} key={item.id} />
                                ))}
                            </div>
                            <div className="swiper-pagination-wrapper">
                                <div className="swiper-pagination clear" />
                            </div>
                        </div>
                    </div>
                ) : null}
            </div>
            {/* 视频 */}
            <div className="flex middle wrap">
                {additionalVideos.map((video) => {
                    return (
                        <VideoElement
                            getPicUrl={getPicUrl}
                            video={video}
                            show={false}
                            key={video.aId}
                        ></VideoElement>
                    )
                })}
            </div>
            <div className="flex middle wrap">
                {videos.map((video) => {
                    return (
                        <VideoElement
                            getPicUrl={getPicUrl}
                            video={video}
                            show={true}
                            key={video.aId}
                        ></VideoElement>
                    )
                })}
            </div>
        </div>
    )
}
const BannerItem = memo(function BannerItem(props) {
    const { id, url, pic, getPicUrl } = props

    return (
        <div className="swiper-slide" key={id}>
            <a href={url}>
                <img src={getPicUrl(pic, '@480w_300h')} width="100%" height="100%" />
            </a>
        </div>
    )
})
const VideoElement = memo(function showStatistics(props) {
    const { video, getPicUrl, show } = props
    if (!video.pic.includes('@320w_200h')) {
        video.pic = getPicUrl(video.pic, '@320w_200h')
    }
    return <VideoItem video={video} key={video.aId} showStatistics={show} />
})
Index.whyDidYouRender = false
export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Index)
